<template>
  <fieldset>
    <legend>App</legend>
    <div class="box">
      <div class="box1">
        <img src="./assets/img/111.png" height="80" alt="">
        <h3><i>To-Do List~</i></h3>
      </div>

      <div class="box2">
        <b>~ 只因你太美 ~</b>
      </div>
      <components></components>
    </div>
  </fieldset>
</template>




<script setup>
    import components from "./components/index.vue"
    
</script>


<style scoped>
    .box{
      width: 520px;
      background-color: #f2f2f2;
      border-radius: 5%;
      overflow: hidden;
      margin-left: 5px;
    }
    .box1{
      width: 520px;
      margin-top: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img{
      margin-right: 16px;
    }
    h3{
      transform: rotate(3deg)
    }
    .box2{
      width: 440px;
      font-size: 20px;
      color: deepskyblue;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 26px;
    }
</style>
